.title2{
    color: snow;
}
.linebox{
    width: 400px;
    height: 1px;
}
.line{
    float: left;
    width: 0;
    height: 1px;
    background-color: snow;
    transition: width,0.5s;
}
.line1{
    width: 60px;
}
.indexbox{
    cursor: grab;
    width: 400px;
    height: 40px;
}
.index{
    float: left;
    width: 60px;
    text-align: center;
    font-size: 35px;
    color: snow;
    transition: color, 0.3s;
}
.index1{
    color: yellow;
}
.productindex{
    width:400px;
    height: 40px;
    padding: 70px 0;
}
.productbox{
    width: 1150px;
    height: 330px;
    margin: 0 auto;
}
.product{
    position: absolute;
    width: 1050px;
    height: 300px;
    margin: 20px auto;
    transition-property: margin, opacity;
    transition-duration: 0.5s,0.2s;
}

.product1{
    opacity: 1;
    z-index: 1;
}
.product2,.product3,.product4,.product5,.product6{
    opacity: 0;
    z-index: 0;
}
.product:hover{
    margin-top: 0;
}
.product:hover .productheader{
    color: rgb(255, 255, 0);
}
.productimg{
    float: left;
    width: 520px;
    height: 250px;
}
.productimg img{
    width: 580px;
    height: 320px;
}
.producttext{
    float: left;
    width: 420px;
    color: snow;
    margin-left: 100px;
    margin-top: 30px;
}
.productheader{
    font-size: 26px;
    transition: color, 0.6s;
}
.productbody{
    margin-top: 40px;
    font-size: 16px;
}
@media screen and (max-width: 1110px) {
    .product {
        width: 600px;
        height: 700px;
    }
    .producttext{
        margin-top: 100px;
        margin-left: 20px;
    }
}